<div class="page-header">
	<h1 class="rt-h1">Endpoints</h1>
	<a class="btn btn-success" href="plugins/raintank-worldping-app/page/endpoint-config" ng-show="ctrl.isOrgEditor">
		<i class="fa fa-plus"></i>
		New Endpoint
	</a>
</div>

<div ng-if="!ctrl.pageReady" class="rt-loading-message-container">
	<div class="rt-loading-message-inside">
		<img class="rt-loading-pulse" src="public/plugins/raintank-worldping-app/img/loading-pulse.svg" style="margin-bottom: 10px;">
		<p class="rt-loading-msg-1">To infinity...and beyond.</p>
		<p class="rt-loading-msg-2">This is taking longer than expected.</p>
		<p class="rt-loading-msg-3">We apologize, something may be up. Please try refreshing first, and contact us if this continues to happen.</p>
	</div>
</div>

<div ng-if="ctrl.pageReady">
	<div ng-if="ctrl.endpoints.length === 0" class="wp-empty-endpoint-list">
		<div style="text-align: center; padding-top: 90px; min-height: 220px; min-width: 400px;  margin: 0 auto;">
			<i ng-class="icon" class="icon-gf icon-gf-endpoint no-endpoints"></i>
			<p ng-if="ctrl.isOrgEditor">Looks like you don’t have any endpoints yet.<br>
				<a class="highlight-word" href="plugins/raintank-worldping-app/page/endpoint-config">Add a new endpoint</a> or
				<a class="highlight-word" href="dashboard/db/worldping-endpoint-summary?var-endpoint=~google_com_demo">view live demo data.</a>
			</p>
			<p ng-if="!ctrl.isOrgEditor">Your org does not have any endpoints.<br>In the meantime,
				<a class="highlight-word" href="dashboard/db/worldping-endpoint-summary?var-endpoint=~google_com_demo">view some live demo data.</a>
			</p>
		</div>
		<a href="#" ng-click="ctrl.showEndpointDesc = !ctrl.showEndpointDesc">
			<span ng-hide="ctrl.showEndpointDesc">What's an endpoint?</span>
			<span><i class="fa fa-caret-right rt-box-accordian-control" ng-hide="ctrl.showEndpointDesc"></i></span>
			<span ng-show="ctrl.showEndpointDesc">What's an endpoint?</span>
			<span><i class="fa fa-caret-down" ng-show="ctrl.showEndpointDesc"></i></span>
		</a>
		<div class="wp-app-endpointdesc-box" ng-class="{ 'wp-app-endpointdesc-open': ctrl.showEndpointDesc }">
			<div class="rt-collapse-blurb-box">
				<p class="rt-helper-blurb">In worldPing, an endpoint is anything you want to monitor.</p>
				<p class="rt-helper-blurb">When you enter the fully qualified domain name of your endpoint, we will automatically detect what is available to monitor (eg. PING, HTTP, HTTPS) and suggest a customizable set of defaults unique to your endpoint.</p>
			</div>
		</div>
	</div>

	<div ng-if="ctrl.endpoints.length > 0">
        <div class="gf-form">
          <span class="gf-form-label width-6">Filter by:</span>
          <div class="gf-form-select-wrapper">
            <select class="gf-form-input gf-size-auto" ng-model="ctrl.filter.tag" ng-options="t for t in ctrl.endpointTags()"><option value="">All Tags</option></select>
          </div>
        </div>
		<div class="rt-list-showing-header">
			<div class="rt-list-status">
				<span class="small">Showing {{(ctrl.endpoints | filterByTag:ctrl.filter.tag).length}}</span>
				<span class="small"> of <span class="rt-list-links" ng-click="setTagFilter('')">{{ctrl.endpoints.length}} total</a></span>
			</div>
		</div>
	</div>
</div>

<section ng-if="ctrl.endpoints.length > 0" class="card-section card-list-layout-list" layout-mode>
	<ol class="card-list" >
		<li class="card-item-wrapper" ng-repeat="endpoint in ctrl.endpoints | filterByTag:ctrl.filter.tag | orderBy:ctrl.sort_field">
			<div class="card-item pointer" ng-click="ctrl.gotoDashboard(endpoint, $event)">
				<div class="card-item-header card-item-header--wp-icons card-item-header-action">
					<rt-endpoint-health endpoint="endpoint" ctrl="ctrl"></rt-endpoint-health>
					<a style="margin-left: 15px; vertical-align: sub;" href="plugins/raintank-worldping-app/page/endpoint-details?endpoint={{endpoint.id}}">
						<i ng-class="icon" class="icon-gf icon-gf-settings" bs-tooltip="'Endpoint<br>Details & Config'"></i>
					</a>
				</div>
				<div class="card-item-body">
					<div class="card-item-details">
						<div class="card-item-name">
							<a href="dashboard/db/worldping-endpoint-summary?&var-endpoint={{endpoint.slug}}&var-probe=All">
								{{endpoint.name}}
							</a>
							<span ng-repeat="tag in endpoint.tags" tag-color-from-name="tag"  class="label label-tag">
								{{tag}}
							</span>
						</div>
					</div>
				</div>
			</div>
		</li>
	</ol>
</section>
